<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="牧中智慧畜牧大数据云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">
    <title>牧中智慧畜牧大数据云平台V1.0</title>


</head>
<style>
    input{
        font-size: 14px;
        color: #0e90d2;
    }
    .row{
        margin-left: 0px;
    }
    .col-sm-3 {
        width: 35%;
    }
    .col-sm-6 {
        width: 65%;
        margin: 2px 0px;
    }
    select#breed_factory_name,select#item {
        height: 34px;
        width: 161px;
    }
</style>
<body style="background-color:#fff">

<div class="wrapper wrapper-content" style="margin-top: 10px;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">

                        <div class='row'>
                            <div class='col-sm-6'>
                                <div class='form-group'>
                                    <label class="col-sm-3 control-label text-right">被保险人（养殖户）：</label>
                                    <div class="col-sm-6">
                                        <select class="select2" id="breed_factory_name" style="max-width: 160px;">
                                            <option value="0">请选择...</option>
                                            <span th:each=" breedFactory :${breedFactoryList}">
                                                <option th:text="${breedFactory.name}" th:value="${breedFactory.id}"></option>
                                            </span>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class='col-sm-6'>
                                <div class='form-group'>
                                    <label class="col-sm-3 control-label text-right">保险的项目：</label>
                                    <div class="col-sm-6">
                                        <select class="select2" id="item" style="max-width: 160px;">
                                            <option value="0">请选择...</option>
                                            <span th:each=" insuranceTemplate :${insuranceTemplateList}">
                                                <option th:text="${insuranceTemplate.item}" th:value="${insuranceTemplate.id}"></option>
                                            </span>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class='col-sm-6'>
                                <div class='form-group'>
                                    <label class="col-sm-3 control-label text-right">保单号码：</label>
                                    <div class="col-sm-6">
                                        <input class="col-sm-6 form-control layer-date" readonly id="insured_number" value=""  type="text" />
                                    </div>
                                </div>
                            </div>
                            <div class='col-sm-6'>
                                <div class='form-group'>
                                    <label class="col-sm-3 control-label text-right">出险日期：</label>
                                    <div class="col-sm-6">
                                        <input class="col-sm-6 form-control layer-date" id="case_date"  type="date" />
                                    </div>
                                </div>
                            </div>
                            <div class='col-sm-6'>
                                <div class='form-group'>
                                    <label class="col-sm-3 control-label text-right">出险地点：</label>
                                    <div class="col-sm-6">
                                        <input class="col-sm-6 form-control layer-date" id="address" value="" type="text" />
                                    </div>
                                </div>
                            </div>
                            <div class='col-sm-6'>
                                <div class='form-group'>
                                    <label class="col-sm-3 control-label text-right">数量：</label>
                                    <div class="col-sm-6">
                                        <input class="col-sm-6 form-control layer-date" id="amount" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" />
                                    </div>
                                </div>
                            </div>
                            <div class='col-sm-6'>
                                <div class='form-group'>
                                    <label class="col-sm-3 control-label text-right">手机号：</label>
                                    <div class="col-sm-6">
                                        <input class="col-sm-6 form-control layer-date" id="phone" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" />
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="insurance_application_id" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<span id="message" style="margin-left: 248px;color: red;font-size: 18px;" ></span>
<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>
<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#breed_factory_name").change(function(){
            changeContext();
            $("#item").val("0");
            $("#item").change(function(){
                changeContext();
                $.ajax({
                    type: "GET",
                    url: "/djt/insurance/claimInsuredNumber/ajax",
                    data: {
                        breedFactoryID : $("#breed_factory_name").val(),
                        item : $("#item :selected").text()
                    },
                    dataType: "json",
                    success: function (data) {
                        $("#insured_number").val(data.formal_number);
                        $("#address").val(data.breed_address);
                        $("#phone").val(data.insured_user_phone);
                        $("#insurance_application_id").val(data.id);
                    }
                })
            })
        })
    })

    function changeContext(){
        $("#insured_number").val("");
        $("#phone").val("");
        $("#address").val("");
        $("input:hidden[id='insurance_application_id']").val("");
    }
</script>

</body>
</html>
